<template>
  <div class="page">
    <div class="head">
      <div class="left">
        <div
          @click="changeLeft(index)"
          :class="linkIndex === index ? 'select':''"
          v-for="(item,index) in link"
          :key="index"
        >{{ item.title }}</div>
      </div>
      <div class="right">
        <div class="title">AI赋能工具，让创新更简单</div>
        <div class="ipt">
          <span class="h11">专利检索</span>
          <img src="../assets/zy/three.png" alt srcset />
          <el-input style="flex: 1" v-model="input" placeholder="请输入商标名称、申请号或申请人名称" />
          <div class="btn">立即搜索</div>
        </div>
      </div>
      <div class="card">
        <div class="card-content">
          <div 
            v-for="(item,index) in cardList" 
            :key="index"
            @click="toPath(item.path)"
          >
            <img :src="getAssetsImages(item.icon)" alt />
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="t1">企业创新发展一站式服务平台</div>
    <div class="card1">
      <div class="left">
        <div class="card1-1">
          <div class="e1">知产创新</div>
          <div class="e2">数字化赋能知识产权一站式服务，助力企业创新加速</div>
          <img src="../assets/zy/weitu.png" alt />
        </div>
        <div class="card1-2">
          <div class="e1" style="paddingTop: 20px">法律服务</div>
          <div class="e2">专业律师打造实时在线法务部门，守护企业健康发展</div>
        </div>
        <div class="card1-2">
          <div class="e1" style="paddingTop: 20px">工商财税</div>
          <div class="e2">高效顾问全流程管家式贴心服务，陪伴企业成长壮大</div>
        </div>
      </div>
      <div class="right">
        <div class="top z_flex">
          <div class="tags flex_1">
            <span
              class="z_flex"
              :class="tagsIndex === index ? 'tags-select': ''"
              v-for="(item,index) in tagsList"
              :key="index"
            >{{ item.title }}</span>
          </div>
          <div class="more z_flex">
            查看更多
            <el-icon size="12">
              <ArrowRightBold />
            </el-icon>
          </div>
        </div>
        <div class="cont1">
          <div class="cont1-view" v-for="(item,index) in 12" :key="index">
            <div class="e3 z_flex">
              <span class="flex_1">国内商标注册</span>
              <img src="../assets/zy/right.png" alt />
            </div>
            <div class="e4">高效智能注册，防止商标被抢注，保护品牌权益</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card2">
      <div class="t2">为创新加速聚合完整知识产权解决方案</div>
      <div class="card2-cont">
        <div class="conts">
          <div class="conts1">
            <div class="conts1-t1">企业知识产权管理平台</div>
            <div class="conts1-tips">
              企业知识产权全生命周期协同管理解决方案，助力企业创新加速与
              <br />知识产权价值提升
            </div>
            <div class="conts1-t2">应用场景</div>
            <div class="conts1-tags">
              <span class="z_flex">SAAS平台</span>
              <span class="z_flex">定制部署</span>
            </div>
            <div class="conts1-t2" style="margin-top: 40px">功能模块</div>
            <div class="conts1-tab">
              <div v-for="(item,index) in 5" :key="index">
                <img src="../assets/zy/gouxuan.png" alt />
                {{ index === 0 ? '商标管理':'流程管理' }}
              </div>
            </div>
            <div class="conts1-btn">
              <span class="z_flex">立即咨询</span>
              <span class="z_flex">查看更多</span>
            </div>
          </div>
          <div class="conts2">
            <div class="conts2-cont">
              <div class="conts2-cont-title">索骥案件运营解决方案</div>
              <div class="conts2-cont-view">助力企业案件标准化管理，专属律师全流程协同办案</div>
            </div>
          </div>
          <div class="conts2">
            <div class="conts2-cont">
              <div class="conts2-cont-title">区域创新与知识产权数字化服务平台</div>
              <div class="conts2-cont-view">深挖整合区域产业创新大数据要素，为产业创新与健康发展提供数字赋能</div>
            </div>
          </div>
          <div class="conts2">
            <div class="conts2-cont">
              <div class="conts2-cont-title">创新大数据与AI开放平台</div>
              <div class="conts2-cont-view">AI 驱动构建开放的创新大数据生态</div>
            </div>
          </div>
          <div class="conts2">
            <div class="conts2-cont">
              <div class="conts2-cont-title">创新与知识产权研究智库</div>
              <div class="conts2-cont-view">数据+媒体+30万专家智库资源，量身定制创新与知识产权整体解决方案</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card2-font">
        <div v-for="(item,index) in tag1List" :key="index">
          <img :src="getAssetsImages(`a${index}`)" alt />
          {{ item.title }}
        </div>
      </div>
    </div>

    <div class="card3">
      <div class="card3-title">客户信赖之选是我们不断进步的源动力</div>
      <div class="card3-cont">
        <div class="card3-cont-h1 z_flex">
          <span>合作企业</span>
        </div>
      </div>
    </div>
    <div class="card3 bg">
      <div class="card3-title" style="padding-bottom: 13px">海量数据资源构建完整科创数字矩阵</div>
      <div class="card3-content">
        <div class="views" v-for="(item,index) in 15" :key="index">
          <div>中国企业工商登记全量数据</div>
          <div>50,000,000+</div>
        </div>
      </div>
    </div>
    <div class="card3" style="background: white">
      <div class="card3-title" style="padding-bottom: 33px">海量数据资源构建完整科创数字矩阵</div>
      <div class="card3-cont1">
        <div class="card3-cont1-left">
          <div class="hh1">知产宝携手众多优秀合作伙伴，致力于共同打造满足各类用户创新发展需求的一站式服务平台，构建知产创新+法律服务+工商财税的完整服务生态。</div>
          <div class="card3-cont1-left-p">
            <div v-for="(item,index) in 4" :key="index">
              <img :src="getAssetsImages(`b${index}`)" alt srcset />
              {{ index === 0 ? '精选优质服务商' : index === 1 ? '平台认证保障' : index === 2 ?'客服全程服务' : '退款售后无忧' }}
            </div>
          </div>
          <div class="card3-button z_flex">了解更多</div>
        </div>
        <div class="card3-cont1-right">
          <div class="views-cont">
            <div class="views">
              <div v-for="(item,index) in cList" :key="index">
                <img :src="getAssetsImages(`c${index}`)" alt />
                <span v-html="item.title"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router"
const router = useRouter();
const toPath = url => {
  router.push(url);
};
let link = ref([
  {
    title: "智能工具"
  },
  {
    title: "特惠专场"
  },
  {
    title: "开放平台"
  },
  {
    title: "服务商城"
  },
  {
    title: "创新榜单"
  }
]);
let linkIndex = ref(0);

const changeLeft = index => {
  linkIndex.value = index;
};

let cardList = ref([
  {
    title: "商标监控",
    icon: "shangbiao"
  },
  { title: "专利监控", icon: "jk" },
  { title: "商标注册", icon: "zhuce" },
  { title: "发明专利申请", icon: "fm", path: "/patentApplication" },
  { title: "软件著作权登记", icon: "rj" }
]);

let tagsList = ref([
  {
    title: "商标服务"
  },
  { title: "专利服务" },
  { title: "版权服务" },
  { title: "创新服务" }
]);
let tagsIndex = ref(0);

let tag1List = ref([
  { title: "科技企业" },
  { title: "政府园区" },
  { title: "高校院所" },
  { title: "金融机构" },
  { title: "服务机构" },
  { title: "管理保护" },
  { title: "智慧决策" },
  { title: "研发创新" },
  { title: "科学评估" },
  { title: "降本增效" }
]);

let cList = ref([
  { title: "律所/律师" },
  { title: "商标代理机构/<br>商标代理人" },
  { title: "专利代理机构<br>专利代理师" },
  { title: "调解中心/调解员" },
  { title: "高等院校/专家学者" },
  { title: "公证处/公证员" }
]);

const getAssetsImages = name => {
  return new URL(`/src/assets/zy/${name}.png`, import.meta.url).href;
};
</script>
<style lang="scss" scope>
.page {
  .bg {
    background: url("../assets/zy/bg.png") no-repeat;
    background-size: 100% 780px;
  }
  .card3 {
    padding: 60px 0 50px;
    background-color: #f4f6fa;
    &-button {
      width: 120px;
      height: 44px;
      background: #0052d9;
      border-radius: 4px;
      margin-top: 20px;
      font-size: 16px;
      font-family: PingFang TC, PingFang TC-Medium;
      font-weight: Medium;
      text-align: left;
      color: #ffffff;
      line-height: 22px;
      cursor: pointer;
    }
    &-cont1 {
      display: flex;
      padding: 0 240px;
      &-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .views {
          display: flex;
          flex-wrap: wrap;
          width: 500px;
          div {
            width: 140px;
            height: 140px;
            flex-shrink: 0;
            background: linear-gradient(180deg, #f0f3f7, #ffffff);
            border: 2px solid #ffffff;
            border-radius: 10px;
            box-shadow: 0px 10px 20px -2px #eceff5;
            margin-bottom: 20px;
            margin-left: 20px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
              width: 60px;
              height: 60px;
            }
            span {
              font-size: 14px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: Regular;
              text-align: center;
              color: #202020;
            }
          }
        }
      }
      &-left {
        width: 696px;
        flex-shrink: 0;
        &-p {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20px;
          div {
            width: 257px;
            display: flex;
            align-items: center;
            margin: 12px 0;
          }
          div:nth-of-type(even) {
            margin-right: 122px;
          }

          img {
            width: 28px;
            height: 28px;
          }
        }
        .h11 {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #202020;
          line-height: 32px;
        }
      }
    }
    &-content {
      padding: 0 240px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .views {
        flex-shrink: 0;
        width: 272px;
        height: 120px;
        margin-top: 20px;
        background: linear-gradient(180deg, #f0f3f7, #ffffff);
        border: 2px solid #ffffff;
        border-radius: 4px;
        box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: center;
        color: #202020;
        line-height: 22px;
        cursor: pointer;
        div:last-of-type {
          font-size: 28px;
          font-family: San Francisco Display, San Francisco Display-Semibold;
          font-weight: 600;
          text-align: center;
          color: #202020;
          line-height: 32px;
          padding-top: 10px;
        }
      }
      .views:hover {
        background: #0052d9;
        border-radius: 4px;
        box-shadow: 0px 10px 20px -2px rgba(25, 40, 64, 0.2);
        color: white;
        border-color: transparent;
        div {
          color: white;
        }
      }
    }
    &-cont {
      &-h1 {
        text-align: center;
        font-size: 20px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        color: #575966;
        line-height: 28px;
        padding: 12px 0 20px;
        span {
          position: relative;
        }
        span::after {
          content: "";
          width: 223px;
          height: 1px;
          background: #d8deea;
          position: absolute;
          top: 50%;
          right: -237px;
          transform: translateY(-50%);
        }
        span::before {
          content: "";
          width: 223px;
          height: 1px;
          background: #d8deea;
          position: absolute;
          top: 50%;
          left: -237px;
          transform: translateY(-50%);
        }
      }
    }
    &-title {
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #202020;
      line-height: 50px;
      text-align: center;
    }
  }
  .t2 {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #202020;
    text-align: center;
    line-height: 50px;
  }
  .card1 {
    padding: 60px 240px;
    background-color: #eff2f6;
    display: flex;
    .more {
      width: 100px;
      height: 36px;
      border: 1px solid #0052d9;
      border-radius: 2px;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      color: #0052d9;
      cursor: pointer;
    }
    .cont1 {
      display: flex;
      flex-wrap: wrap;
      &-view {
        width: 25%;
        height: 145px;
        padding: 0 20px;
        background: #ffffff;
        border: 1px solid #dee4ea;
        box-sizing: border-box;
        margin-left: -1px;
        margin-bottom: -1px;
        cursor: pointer;
        position: relative;

        .e3 {
          padding-top: 30px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #181818;
        }
        .e4 {
          font-size: 14px;
          padding-top: 16px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #575966;
        }
      }
      &-view:nth-child(-n + 4) {
        border-top-color: transparent;
      }
      &-view:nth-child(4n + 4) {
        border-right-color: transparent;
      }
      &-view:nth-child(4n + 1) {
        border-left-color: transparent;
      }
      &-view:nth-child(n + 8) {
        border-bottom-color: transparent;
      }
      &-view:hover {
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1) !important;
        position: relative;
        z-index: 100;
      }
    }
    .top {
      margin-bottom: 24px;
      .tags {
        display: flex;
        span {
          width: 120px;
          height: 36px;
          cursor: pointer;
          background: #ffffff;
          border-radius: 2px;
          margin-right: 20px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: center;
          color: #202020;
        }
        .tags-select {
          background: #0052d9;
          color: white;
        }
      }
    }
    .e1 {
      font-size: 20px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      color: #202020;
      line-height: 32px;
      padding-top: 40px;
    }
    .e2 {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #575966;
      line-height: 22px;
      padding-top: 10px;
    }

    &-1 {
      height: 186px;
      background: linear-gradient(125deg, #eff1f6 6%, #ffffff 100%);
      border: 2px solid #ffffff;
      border-radius: 4px;
      box-shadow: 0px 10px 40px 0px #d7dce9;
      display: flex;
      flex-direction: column;
      padding: 0 30px;
      box-sizing: border-box;
      position: relative;
      img {
        width: 182px;
        height: 182px;
        top: 0;
        right: 0;
        position: absolute;
      }
    }
    &-2 {
      height: 130px;
      background: #ffffff;
      border: 2px solid #ffffff;
      border-radius: 4px;
      box-shadow: 0px 10px 40px 0px #ebeef5;
      margin-top: 20px;
      padding: 0 30px;
    }
    .left {
      width: 300px;
      flex-shrink: 0;
      margin-right: 20px;
      div {
        cursor: pointer;
      }
    }
    .right {
      flex: 1;
    }
  }
  .card2 {
    padding: 60px 240px;
    background-color: white;
    &-font {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      div {
        width: 264px;
        height: 72px;
        flex-shrink: 0;
        margin-top: 30px;
        background: linear-gradient(180deg, #f0f3f7, #ffffff);
        border: 2px solid #ffffff;
        border-radius: 4px;
        box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 48px;
          height: 48px;
          margin-left: 24px;
          margin-right: 12px;
        }
      }
    }
    &-cont {
      .conts {
        margin-top: 40px;
        display: flex;
        .conts1 {
          flex-shrink: 0;
          background: linear-gradient(180deg, #fafbfc, #ffffff);
          border: 2px solid #ffffff;
          border-radius: 4px;
          box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.1);
          height: 460px;
          padding: 0 30px;
          box-sizing: border-box;
          &-btn {
            display: flex;
            span {
              flex: 1;
              height: 44px;
              background: #ffffff;
              border-radius: 2px;
              font-size: 16px;
              font-family: PingFang TC, PingFang TC-Regular;
              font-weight: Regular;
              color: #202020;
              cursor: pointer;
            }
            span:first-of-type {
              margin-right: 15px;
              background: #0052d9;
              color: white;
            }
          }
          &-tab {
            display: flex;
            padding: 16px 0 42px;
            div {
              display: flex;
              align-items: center;
              margin-right: 20px;
              img {
                margin-right: 4px;
              }
            }
          }
          &-tags {
            display: flex;
            margin-top: 16px;
            span {
              width: 88px;
              height: 32px;
              border: 1px solid #0052d9;
              font-size: 14px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: Regular;
              color: #0052d9;
              margin-right: 20px;
            }
          }
          &-t2 {
            font-size: 20px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #202020;
            line-height: 28px;
          }
          &-tips {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #202020;
            line-height: 22px;
            padding: 14px 0 30px;
          }
          &-t1 {
            font-size: 20px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: 600;
            text-align: left;
            color: #202020;
            line-height: 28px;
            padding-top: 36px;
          }
        }
        .conts2 {
          flex: 1;
          height: 460px;
          border: 2px solid #ffffff;
          border-radius: 4px;
          box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.1);
          box-sizing: border-box;
          margin-left: 20px;
          background: linear-gradient(
            180deg,
            #1c8cbc 6%,
            rgba(29, 140, 188, 0)
          );
          &-cont {
            padding: 36px 20px;
            &-title {
              font-size: 20px;
              font-family: PingFang SC, PingFang SC-Semibold;
              font-weight: 600;
              text-align: left;
              color: #ffffff;
              line-height: 28px;
            }
            &-view {
              font-size: 14px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: justify;
              color: #ffffff;
              line-height: 22px;
              margin-top: 12px;
            }
          }
        }
        .conts2:nth-of-type(3) {
          background: linear-gradient(
            180deg,
            #5673e8 10%,
            rgba(86, 115, 232, 0)
          );
        }
        .conts2:nth-of-type(4) {
          background: linear-gradient(180deg, #1c4ebc 9%, rgba(29, 86, 188, 0));
        }
        .conts2:last-of-type {
          background: linear-gradient(
            180deg,
            #1cb6bc 9%,
            rgba(28, 182, 188, 0)
          );
        }
      }
    }
  }
  .t1 {
    padding-top: 106px;
    padding-bottom: 40px;
    text-align: center;
    background: #ffffff;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #202020;
    line-height: 50px;
  }
  .head {
    height: 450px;
    background: url("../assets/zy/bg1.png") no-repeat;
    background-size: 100% 100%;
    padding: 50px 220px 0 110px;
    display: flex;
    position: relative;
    .card {
      position: absolute;
      width: 100%;
      bottom: -44px;
      left: 0;
      &-content {
        padding: 0 240px;
        height: 88px;
        display: flex;
        div {
          flex: 1;
          height: 88px;
          background: linear-gradient(180deg, #f0f3f7, #ffffff);
          border: 2px solid #ffffff;
          border-radius: 4px;
          box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
          margin-right: 30px;
          font-size: 20px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          display: flex;
          align-items: center;
          color: #202020;
          padding-left: 30px;
          cursor: pointer;
          img {
            margin-right: 12px;
          }
        }
        div:last-of-type {
          margin-right: 0;
        }
      }
    }
    .right {
      margin-left: 70px;
      padding-top: 75px;
      .ipt {
        width: 580px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #1752d9;
        border-radius: 4px;
        margin-top: 34px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .h11 {
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          color: #222426;
          padding-left: 18px;
          display: flex;
          align-items: center;
        }
        img {
          width: 12px;
          height: 12px;
          margin: 0 0 0 5px;
        }
        .el-input__wrapper {
          box-shadow: 0 0 0 1px transparent inset;
        }
        .btn {
          width: 120px;
          line-height: 48px;
          height: 100%;
          background: #0052d9;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          cursor: pointer;
          color: #ffffff;
        }
      }
      .title {
        font-size: 40px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        color: #202020;
        line-height: 56px;
      }
    }
    .left {
      width: 283px;
      flex-shrink: 0;
      div {
        height: 72px;
        border-right: 2px solid rgba(255, 255, 255, 0.5);
        padding-right: 42px;
        text-align: right;
        cursor: pointer;
        line-height: 72px;
      }
      .select {
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0.3),
          rgba(255, 255, 255, 0.3)
        );
        border-right-color: #0052d9;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: bold;
        color: #0052d9;
      }
    }
  }
}
</style>

